import React from 'react';
import Input from "../../../Component/Input/Input";
import {Row, Icon} from "antd";
import Logo from '../../../Common/svg/Logo';
import RoundButton from "../../../Component/RoundButton/RoundButton";
import SvgPhone from "../../../Common/svg/LoginPhone";
import './index.css';
import "../Common/index.css";
import SMSSVG from "../../../Common/svg/SMS";
import User from '../../../Server/User';
import SMS from "../../../Server/SMS";
import CheckUtil from "../../../utils/CheckUtil";
import UserCheck from '../../../utils/UserCheck';

export default class ChangePhone extends React.Component {
    constructor(props){
      super();
      this.state = {
        visible: false,
        changephone: false,//解绑
        changePhoneNumber:props.changePhoneNumber,
        changeNewPhone:"",
        changePhoneShowinfo:"发送验证码",
        changePhoneSMS:""
      };
    }
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
    ChangePhone(){
      if(this.Check()===false){
          return;
      }
        User.UserReplacePhone(this.state.changePhoneNumber,
          UserCheck.GetUserID(),this.state.changeNewPhone,this.state.changePhoneSMS)
        .then(resonse=>{
          var data = {
            name: 'ChangePhoneModelSuccess',
          }
          window.parent.postMessage(data);
        },reject=>{
          this.SetErr(reject.msg);
      })
        console.log("change")
    }
    //发送验证码
  SendSMS(){
      if(this.CheckPhone()){
          this.setState({
              changePhoneShowinfo:"发送中",
          });
          SMS.SendSms(this.state.changeNewPhone)
          .then(response=>{
              this.setState({
                  changePhoneSendSMS:true,
                  time:60
              },()=>{
                  let timerTick=setInterval(() => {
                      let count=this.state.time
                          if(count>0){
                              this.setState({
                                  changePhoneShowinfo:count.toString(),
                                  time:count-1
                              })
                          }
                          else{
                              clearInterval(this.state.timer)
                              this.setState({
                                  changePhoneShowinfo:"发送验证码",
                                  time:60
                              })
                          }
                      }, 1000);
                      this.setState({
                          timer:timerTick
                      })
              });

          },reject=>{
              this.setState({
                  changePhoneShowinfo:"发送失败",
              })
          });
      }
  }
  ClearErr(){
      this.setState({
          err:""
      });
  }
  SetErr(value){
      this.setState({
          err:value
      });
  }
  CheckPhone(){
      this.ClearErr();
      if(!CheckUtil.CheckPhone(this.state.changeNewPhone)){
          this.SetErr("手机号码错误");
          return false;
      }
      return true;
  }
  Check(){
      this.ClearErr();
      let checkPhone=CheckUtil.CheckPhone(this.state.changeNewPhone);
      let checkBtn=this.state.changePhoneSendSMS;
      if(checkPhone===false){
          this.SetErr("手机号码错误");
          return false;
      }
      if(checkBtn===false){
          this.SetErr("请点击发送验证码");
          return false;
      }
      if(this.state.smsCode===""){
          this.SetErr("请输入验证码");
          return false;
      }
      return checkPhone  && checkBtn;
  }
    
      render() {
        return (
            <div>
              <div className="Modal_Content_Out">
                  <div>
                      <Logo width="133" height="99"/>
                  </div>
                  <Row className="Modal_Content_Phone">
                      <Input
                          type={"plain"}
                          placeholder={"手机号"}
                          prefix={<Icon component={SvgPhone}/>}
                          autoComplete={"username"} 
                          value={this.state.changeNewPhone}
                          onChange={e=>this.setState({changeNewPhone:e.target.value})}
                      />
                  </Row>
                  <Row className="Modal_Content_Verification">
                      <Input
                          type={"plain"}
                          placeholder={"验证码"}
                          prefix={<Icon component={SMSSVG}/>}
                          autoComplete={"username"}
                          value={this.state.changePhoneSMS}
                          onChange={e=>this.setState({changePhoneSMS:e.target.value})}
                      />
                      <span className="Modal_Content_Code" onClick={e=>this.SendSMS(e)}>{this.state.changePhoneShowinfo}</span>
                  </Row>
                  <div>
                      <font color="red">{this.state.err}</font>
                  </div>
                  <Row className={"Login_Button"}  onClick={e=>this.ChangePhone(e)}>
                      <RoundButton text={"确定提交"}/>
                  </Row>
                  <div className="Modal_Content_Desc">
                      <span>*</span>
                      <span>1、更换成功后，所有账户信息不变，请使用新手机号登录本账户；<br/>2、原手机号将无法登录本账户，从更换日起三个月内无法注册新的Fly派账户。</span>
                  </div>
              </div>
            </div>
        );
      }
  }